<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:p="http://primefaces.org/ui" template="/WEB-INF/template.xhtml">
    <ui:define name="head">

        <style>
            a {
                text-decoration: none !important;
            }
        </style>

    </ui:define>

    <ui:define name="content">

        <div class="content-section documentation">
            <div style="border-radius: 50px; max-height: 500px"
                 class="overflow-hidden mb-5 flex align-items-center">
                <img alt="PrimeFaces UI Kit"
                     src="resources/demo/images/uikit/primeone-cover-light.jpeg"
                     class="w-full" />
            </div>
            <div class="card mb-5" style="border-radius: 50px">
                <div
                    class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8 mb-8">
                    <div class="w-full md:w-6">
                        <img alt="PrimeFaces UI Kit"
                             src="resources/demo/images/uikit/uikit-figma.png" class="w-full" />
                    </div>
                    <div class="w-full md:w-6">
                        <div class="text-primary font-bold mb-2">UP-TO-DATE</div>
                        <div class="text-900 text-5xl font-bold mb-3">Best Features
                            of Figma</div>
                        <p class="mb-3 text-lg">PrimeOne for Figma uses the latest powerful
                            features like components, variants, auto layout, styles and
                            interactive components. It'll always follow the best practices.</p>

                        <ul class="flex flex-wrap m-0 p-0 text-lg">
                            <li class="flex align-items-center w-6 p-3"><i
                                    class="pi pi-check-circle text-green-600 mr-2"></i> <span
                                    class="font-bold">Auto Layout</span></li>
                            <li class="flex align-items-center w-6 p-3"><i
                                    class="pi pi-check-circle text-green-600 mr-2"></i> <span
                                    class="font-bold">Variants</span></li>
                            <li class="flex align-items-center w-6 p-3"><i
                                    class="pi pi-check-circle text-green-600 mr-2"></i> <span
                                    class="font-bold">Styles</span></li>
                            <li class="flex align-items-center w-6 p-3"><i
                                    class="pi pi-check-circle text-green-600 mr-2"></i> <span
                                    class="font-bold">Interactive Components</span></li>
                            <li class="flex align-items-center w-6 p-3"><i
                                    class="pi pi-check-circle text-green-600 mr-2"></i> <span
                                    class="font-bold">Boolean, Instance Swap and Text Properties</span></li>
                            <li class="flex align-items-center w-6 p-3">
                                <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                <span class="font-bold">Nested Instances</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div
                    class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8 mb-8">
                    <div class="w-full md:w-6">
                        <div class="text-primary font-bold mb-2">ENTERPRISE GRADE</div>
                        <div class="text-900 text-5xl font-bold mb-3">Powerful
                            System</div>
                        <p class="mb-3 text-lg">Save countless hours on every project with a
                            carefully designed system that uses Prime UI Suite components.
                            Start producing design results in no time.</p>

                        <ul class="flex flex-wrap m-0 p-0 text-lg">
                            <li class="flex align-items-center w-6 p-3"><i
                                    class="pi pi-check-circle text-green-600 mr-2"></i> <span
                                    class="font-bold">Numerous Components</span></li>
                            <li class="flex align-items-center w-6 p-3"><i
                                    class="pi pi-check-circle text-green-600 mr-2"></i> <span
                                    class="font-bold">Icon Library</span></li>
                            <li class="flex align-items-center w-6 p-3"><i
                                    class="pi pi-check-circle text-green-600 mr-2"></i> <span
                                    class="font-bold">Easy Customization</span></li>
                            <li class="flex align-items-center w-6 p-3"><i
                                    class="pi pi-check-circle text-green-600 mr-2"></i> <span
                                    class="font-bold">Atomic Approach</span></li>
                        </ul>
                    </div>
                    <div class="w-full md:w-6">
                        <img alt="PrimeFaces Designer"
                             src="resources/demo/images/uikit/uikit-system.png" class="w-full" />
                    </div>
                </div>
                <div
                    class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8 mb-8">
                    <div class="w-full md:w-6">
                        <img alt="PrimeFaces Designer"
                             src="resources/demo/images/uikit/uikit-themes.png" class="w-full" />
                    </div>
                    <div class="w-full md:w-6">
                        <div class="text-primary font-bold mb-2">DARK MODE</div>
                        <div class="text-900 text-5xl font-bold mb-3">Two Themes</div>
                        <p class="mb-3 text-lg">PrimeOne is designed based on Lara Blue Light
                            and Lara Blue Dark themes. Easily change the themes of your
                            designs using Figma's Swap Library feature.</p>

                        <ul class="flex flex-wrap m-0 p-0 text-lg">
                            <li class="flex align-items-center w-6 p-3"><i
                                    class="pi pi-check-circle text-green-600 mr-2"></i> <span
                                    class="font-bold">Lara Light</span></li>
                            <li class="flex align-items-center w-6 p-3"><i
                                    class="pi pi-check-circle text-green-600 mr-2"></i> <span
                                    class="font-bold">Lara Dark</span></li>
                        </ul>
                    </div>
                </div>
                <div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8">
                    <div class="w-full md:w-6">
                        <div class="text-primary font-bold mb-2">TOKENS STUDIO</div>
                        <div class="text-900 text-5xl font-bold mb-3">Tokens Support</div>
                        <p class="mb-3 text-lg">Empower yourself with unprecedented control over your designs. Tokens Studio integration unlocks a whole new level of flexibility, allowing you to create and manage design tokens seamlessly.</p>

                        <ul class="flex flex-wrap m-0 p-0 text-lg">
                            <li class="flex align-items-center w-6 p-3">
                                <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                <span class="font-bold">Countless Design Tokens</span>
                            </li>
                            <li class="flex align-items-center w-6 p-3">
                                <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                <span class="font-bold">Light and Dark Sets</span>
                            </li>
                            <li class="flex align-items-center w-12 p-3">
                                <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                <span class="font-bold">Well Documented</span>
                            </li>
                        </ul>
                    </div>
                    <div class="w-full md:w-6">
                        <img alt="Tokens Support" src="resources/demo/images/uikit/uikit-tokens.png" class="w-full"/>
                    </div>
                </div>
            </div>

            <div class="flex flex-column md:flex-row gap-4 md:gap-8 mb-5">
                <a href="https://www.figma.com/file/OBMr8vZAodP9RsQR2XYPHh/Preview-%7C-PrimeOne-%7C-2.1?type=design&amp;node-id=806%3A36648&amp;mode=design&amp;t=WvG6UHUZIPhmEx0d-1" class="p-5 w-full md:w-6 bg-white flex flex-column align-items-center border-2 border-transparent hover:border-primary transition-colors transition-duration-300" style="border-radius: 50px">
                    <span
                        class="text-gray-900 text-4xl font-bold mb-5">Preview Light</span>
                    <img alt="Figma Light"
                         src="resources/demo/images/uikit/logo-figma-light.svg"
                         class="w-4rem" />
                </a>
                <a href="https://www.figma.com/file/26zWEQAb8MuS6lGIhJQXE6/Preview-%7C-Dark-%7C-PrimeOne-%7C-2.1?type=design&amp;node-id=806%3A36648&amp;mode=design&amp;t=SPpYKnTpkKLsk0qA-1" class="p-5 w-6 bg-gray-900 flex flex-column align-items-center border-2 border-transparent hover:border-primary transition-colors transition-duration-300" style="border-radius: 50px">
                    <span
                        class="text-white text-4xl font-bold mb-5">Preview Dark</span> <img
                        alt="Figma Dark"
                        src="resources/demo/images/uikit/logo-figma-dark.svg"
                        class="w-4rem" />
                </a>
            </div>

            <div class="card mb-5" style="border-radius: 50px">
                <div class="text-900 font-bold text-5xl mb-3 text-center">Pricing</div>
                <div class="mb-6 text-center line-height-3 text-lg">Choose the right
                    plan for your business. Whether you are an individual or a member
                    of a team, UI Kit is available for affordable prices.</div>

                <div class="grid">
                    <div class="col-12 lg:col-4">
                        <div class="p-3 h-full">
                            <div class="shadow-2 p-5 h-full flex flex-column surface-card"
                                 style="border-radius: 6px">
                                <div class="text-900 font-medium text-xl mb-2">Single
                                    Designer</div>
                                <div class="text-600 font-medium">For individual designers</div>
                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
                                <div>
                                    <span class="font-bold text-2xl text-900">$99</span>
                                </div>
                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
                                <ul class="list-none p-0 m-0 flex-grow-1 text-lg">
                                    <li class="flex align-items-center mb-3"><i
                                            class="pi pi-check-circle text-green-500 mr-2"></i> <span
                                            class="font-bold">1 Designer</span></li>
                                    <li class="flex align-items-center mb-3"><i
                                            class="pi pi-check-circle text-green-500 mr-2"></i> <span>Auto
                                            Layout &#38; Variants</span></li>
                                    <li class="flex align-items-center mb-3"><i
                                            class="pi pi-check-circle text-green-500 mr-2"></i> <span>Interactive
                                            Components</span></li>
                                    <li class="flex align-items-center mb-3">
                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                        <span>Tokens Studio Support</span>
                                    </li>
                                    <li class="flex align-items-center mb-3"><i
                                            class="pi pi-check-circle text-green-500 mr-2"></i> <span>Lifetime
                                            Support</span></li>
                                    <li class="flex align-items-center mb-3"><i
                                            class="pi pi-check-circle text-green-500 mr-2"></i> <span>Use
                                            on Unlimited Projects</span></li>
                                </ul>
                                <hr
                                    class="mb-3 mx-0 border-top-1 border-none surface-border mt-auto" />
                                <a href="https://www.primefaces.org/store/uikit.xhtml"
                                   class="bg-blue-500 text-white hover:bg-blue-400 p-3 w-full border-round text-center transition-colors transition-duration-300 font-bold">Buy
                                    Now</a>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 lg:col-4">
                        <div class="p-3 h-full">
                            <div class="shadow-2 p-5 h-full flex flex-column surface-card"
                                 style="border-radius: 6px">
                                <div class="text-900 font-medium text-xl mb-2">Team</div>
                                <div class="text-600 font-medium">For small teams</div>
                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
                                <div>
                                    <span class="font-bold text-2xl text-900">$249</span>
                                </div>
                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
                                <ul class="list-none p-0 m-0 flex-grow-1 text-lg">
                                    <li class="flex align-items-center mb-3"><i
                                            class="pi pi-check-circle text-green-500 mr-2"></i> <span
                                            class="font-bold">Up to 5 Designers</span></li>
                                    <li class="flex align-items-center mb-3"><i
                                            class="pi pi-check-circle text-green-500 mr-2"></i> <span>Auto
                                            Layout &#38; Variants</span></li>
                                    <li class="flex align-items-center mb-3"><i
                                            class="pi pi-check-circle text-green-500 mr-2"></i> <span>Interactive
                                            Components</span></li>
                                    <li class="flex align-items-center mb-3">
                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                        <span>Tokens Studio Support</span>
                                    </li>
                                    <li class="flex align-items-center mb-3"><i
                                            class="pi pi-check-circle text-green-500 mr-2"></i> <span>Lifetime
                                            Support</span></li>
                                    <li class="flex align-items-center mb-3"><i
                                            class="pi pi-check-circle text-green-500 mr-2"></i> <span>Use
                                            on Unlimited Projects</span></li>
                                </ul>
                                <hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
                                <a href="https://www.primefaces.org/store/uikit.xhtml"
                                   class="bg-purple-500 text-white hover:bg-purple-400 p-3 w-full border-round text-center transition-colors transition-duration-300 font-bold">Buy
                                    Now</a>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 lg:col-4">
                        <div class="p-3 h-full">
                            <div class="shadow-2 p-5 flex flex-column surface-card"
                                 style="border-radius: 6px">
                                <div class="text-900 font-medium text-xl mb-2">Enterprise</div>
                                <div class="text-600 font-medium">For large teams</div>
                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
                                <div>
                                    <span class="font-bold text-2xl text-900">Exclusive
                                        Deals</span>
                                </div>
                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
                                <ul class="list-none p-0 m-0 flex-grow-1 text-lg">
                                    <li class="flex align-items-center mb-3"><i
                                            class="pi pi-check-circle text-green-500 mr-2"></i> <span
                                            class="font-bold">Unlimited Designers</span></li>
                                    <li class="flex align-items-center mb-3"><i
                                            class="pi pi-check-circle text-green-500 mr-2"></i> <span>Auto
                                            Layout &#38; Variants</span></li>
                                    <li class="flex align-items-center mb-3"><i
                                            class="pi pi-check-circle text-green-500 mr-2"></i> <span>Interactive
                                            Components</span></li>
                                    <li class="flex align-items-center mb-3">
                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                        <span>Tokens Studio Support</span>
                                    </li>
                                    <li class="flex align-items-center mb-3"><i
                                            class="pi pi-check-circle text-green-500 mr-2"></i> <span>Lifetime
                                            Support</span></li>
                                    <li class="flex align-items-center mb-3"><i
                                            class="pi pi-check-circle text-green-500 mr-2"></i> <span>Use
                                            on Unlimited Projects</span></li>
                                </ul>
                                <hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
                                <a href="mailto:contact@primetek:com.tr"
                                   class="bg-bluegray-500 text-white hover:bg-bluegray-400 p-3 w-full border-round text-center transition-colors transition-duration-300 font-bold">Contact
                                    Us</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card" style="border-radius: 50px">
                <span class="block font-bold text-5xl mb-5 text-center text-900">Frequently
                    Asked Questions</span>
                <div class="grid">
                    <div class="col-12 lg:col-4 px-2 lg:px-5">
                        <div class="text-xl text-900 line-height-3 mb-2 text-900">What
                            do I get when I purchase a license?</div>
                        <p class="mt-0 mb-6 p-0 line-height-3 text-lg">You'll be able to
                            download two Figma files for light and dark themes.</p>

                        <div class="text-xl text-900 line-height-3 mb-2 text-900">Is
                            there a recurring fee or is the license perpetual?</div>
                        <p class="mt-0 mb-6 p-0 line-height-3 text-lg">UI Kit license is
                            perpetual so requires one time payment, not subscription based.</p>

                        <div class="text-xl text-900 line-height-3 mb-2 text-900">Can
                            I use UI Kit license for commercial projects?</div>
                        <p class="mt-0 mb-6 p-0 line-height-3 text-lg">Yes, your license
                            allows you to sell your projects that utilize the UI Kit
                            implementations.</p>

                        <div class="text-xl text-900 line-height-3 mb-2 text-900">Can
                            I create multiple projects for multiple clients?</div>
                        <p class="mt-0 mb-6 p-0 line-height-3 text-lg">There is no limit, you
                            are able to use UI Kit in multiple projects for multiple clients.</p>
                    </div>
                    <div class="col-12 lg:col-4 px-2 lg:px-5">
                        <div class="text-xl text-900 line-height-3 mb-2 text-900">We're
                            a reseller, are we able to purchase a license on behalf of our
                            client?</div>
                        <p class="mt-0 mb-6 p-0 line-height-3 text-lg">
                            Yes, after the purchase, please <a
                                href="mailto:contact@primetek.com.tr"
                                class="text-primary-500 no-underline hover:underline">contact
                                us</a> so we can transfer the license to your client.
                        </p>

                        <div class="text-xl text-900 line-height-3 mb-2 text-900">Does
                            the enterprise license include contractors within the
                            organization?</div>
                        <p class="mt-0 mb-6 p-0 line-height-3 text-lg">Yes, contractors are
                            also able to use the UI Kit within your company.</p>

                        <div class="text-xl text-900 line-height-3 mb-2 text-900">Can
                            subsidiary company of a larger organization share the enterprise
                            license?</div>
                        <p class="mt-0 mb-6 p-0 line-height-3 text-lg">No, enterprise license
                            is per company so each subsidiary company needs to purchase a
                            separate license.</p>

                        <div class="text-xl text-900 line-height-3 mb-2 text-900">What
                            does "free updates" mean?</div>
                        <p class="mt-0 mb-6 p-0 line-height-3 text-lg">All updates will be
                            totally free of charge for existing customers for an unlimited
                            period.</p>
                    </div>
                    <div class="col-12 lg:col-4 px-2 lg:px-5">
                        <div class="text-xl text-900 line-height-3 mb-2 text-900">How
                            can I get support?</div>
                        <p class="mt-0 mb-6 p-0 line-height-3 text-lg">
                            Support is provided by PrimeTek via <a
                                href="https://github.com/orgs/primefaces/discussions/categories/figma-ui-kit"
                                class="text-primary-500 no-underline hover:underline">a
                                dedicated forum channel monitored</a> by PrimeTek support staff.
                        </p>

                        <div class="text-xl text-900 line-height-3 mb-2 text-900">What
                            does lifetime support mean?</div>
                        <p class="mt-0 mb-6 p-0 line-height-3 text-lg">Support service at the
                            forum does not have a time limit.</p>

                        <div class="text-xl text-900 line-height-3 mb-2 text-900">Can
                            I include UI Kit in an open source project?</div>
                        <p class="mt-0 mb-6 p-0 line-height-3 text-lg">Due to the license, it
                            is not possible to use the UI Kit in an open source project where
                            the design files are publicly available.</p>
                    </div>
                </div>
            </div>
        </div>
    </ui:define>
</ui:composition>